@import '../search/input/SearchButton';
@import '../search/input/QueryInput';

.tree-page {
    overflow-y: auto;
    padding: 1rem 2rem;
    flex: 1;

    &__title {
        display: flex;
        align-items: center;
        margin-left: -0.5rem; // icon flush with left
    }

    &__section {
        margin-bottom: 1.75rem;
        width: 100%;

        &-header {
            margin-bottom: 0.125rem;
        }

        max-width: 64rem;
        &-search {
            display: flex;
            .search-help {
                margin-left: 0.25rem;
                // stylelint-disable-next-line declaration-property-unit-whitelist
                margin-top: -2px;
            }
        }
    }

    // To avoid having empty columns (and thus the items appearing not flush with the left margin),
    // the component only applies this class when there are >= 6 items. This number is chosen
    // because it is greater than the maximum number of columns that will be shown and ensures that
    // at least 1 column has more than 1 item.
    //
    // See also MIN_ENTRIES_FOR_COLUMN_LAYOUT.
    &__entries--columns {
        column-gap: 2.25rem;
        column-width: 13rem;

        @media (max-width: $media-sm) {
            column-count: 1;
        }
        @media (max-width: $media-md) {
            column-count: 3;
        }
        @media (max-width: $media-lg) {
            column-count: 4;
        }
        @media (min-width: $media-lg) {
            column-count: 5;
        }
    }

    .git-commit-node {
        padding-left: 0;
        padding-right: 0;
        .git-commit-node__message-subject {
            opacity: 0.9;
        }
        .btn {
            opacity: 0.85;
        }
    }
}

.tree-entry {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    margin-left: -0.25rem;
    padding: 0.125rem 0.25rem;
    &:hover {
        background-color: $color-bg-1;
    }
}

.theme-light {
    .tree-entry {
        &:hover {
            background-color: $color-light-bg-2;
        }
    }
}
